<template>
  <div>
    <div class="quTitle p-y-10 flex justify-between items-center no-touch">
      <div style="width: 70%;">
        <el-tag
          effect="plain"
          size="small"
        >{{currentQu.objTag ? currentQu.objTag : currentQu.subTag}}</el-tag>
        {{ curIdx+'. ' }}{{ currentQu.objContent ? currentQu.objContent : currentQu.subContent}}
      </div>
      <div class="flex items-center">
        <div class="flex items-center">
          <span>难度：</span>
          <el-rate v-model="grand" disabled />
        </div>
        <Enclosure :currentQu="currentQu" />
      </div>
    </div>
    <el-row :gutter="24">
      <el-col :span="8" :offset="16">
        <div style="float:right">
          <span>题目分数：{{currentQu.quScore}}</span>
          <el-divider direction="vertical" />
          <span>得分：{{currentQu.userScore}}</span>
        </div>
      </el-col>
    </el-row>

    <el-radio-group v-if="currentQu.objType == 1" v-model="userAns">
      <el-radio label="1">A：{{ currentQu.objOne }}</el-radio>
      <el-radio label="2">B：{{ currentQu.objTwo }}</el-radio>
      <el-radio label="3">C：{{ currentQu.objThree }}</el-radio>
      <el-radio label="4">D：{{ currentQu.objFour }}</el-radio>
    </el-radio-group>

    <el-radio-group v-if="currentQu.objType == 2" v-model="userAns">
      <el-radio label="1">{{ currentQu.objOne }}</el-radio>
      <el-radio label="2">{{ currentQu.objTwo }}</el-radio>
    </el-radio-group>

    <el-checkbox-group v-model="userListAns" v-if="currentQu.objType == 3">
      <el-checkbox label="1">A：{{ currentQu.objOne }}</el-checkbox>
      <el-checkbox label="2">B：{{ currentQu.objTwo }}</el-checkbox>
      <el-checkbox label="3">C：{{ currentQu.objThree }}</el-checkbox>
      <el-checkbox label="4">D：{{ currentQu.objFour }}</el-checkbox>
    </el-checkbox-group>

    <div v-if="currentQu.subType == 4" class="flex items-center">
      <span>我的答案:</span>
      <el-input class="border-bottom" v-model="userAns" auto-complete="off" clearable disabled />
    </div>

    <div v-if="currentQu.subType == 5" style="border: 1px solid #ccc;">
      <el-input type="textarea" :rows="4" disabled v-model="userAns"></el-input>
    </div>
  </div>
</template>
  
  <script>
import Enclosure from "./enclosure.vue";
export default {
  name: "quInfo",
  components: {
    Enclosure
  },
  props: {
    currentQu: {
      type: Object,
      default: () => ({})
    },
    curIdx: Number
  },
  data() {
    return {
      // 文本编辑器
      userListAns: [],
      userAns: ""
    };
  },
  watch: {
    currentQu: {
      handler: function(newVal, oldVal) {
        if (newVal != null && newVal.userAnswer != null) {
          console.log(newVal.userAnswer);
          this.userAns = newVal.userAnswer;
          this.userListAns = newVal.userAnswer.split("$");
        } else {
          this.userAns = "";
          this.userListAns = [];
        }
      },
      deep: true
    }
  },
  computed: {
    grand: {
      get() {
        return this.currentQu.objGrand
          ? this.currentQu.objGrand
          : this.currentQu.subGrand;
      }
    }
  },
  created() {},
  methods: {}
};
</script>
  <style scoped>
.el-radio-group,
.el-checkbox-group {
  display: flex;
  flex-direction: column;
}
.el-radio,
.el-checkbox {
  margin-top: 20px;
}
.el-input {
  width: 50%;
}
.el-input :deep(.el-input__inner) {
  border: none;
}
:deep(.el-rate) {
  height: auto;
  line-height: 0;
}
</style>